<template>
  <div class="box">
    

    <!-- 底部导航栏 -->
    <ul class="botnav">
      <li @click="cart(0)">
        <img src="../assets/selected.png" alt="">
        <p>商城</p>
      </li>
      <li @click="cart(1)">
        <img src="../assets/fenl.png" alt="">
        <p>分类</p>
      </li>
      <li @click="cart(2)">
        <img src="../assets/gowu (1).png" alt="">
        <p>购物车</p>
      </li>
      <li @click="cart(3)">
        <img src="../assets/wodei.png" alt="">
        <p>我</p>
      </li>
    </ul>
    <router-view/>
  </div>
</template>
<script>

export default {
  data() {
    return {
      // 头部top栏
      // activeName: 'a',
    }
  },
  methods: {
    cart(a) {
      this.botid = a
      console.log(this.botid);
      if (a == 0) {
        this.$router.push('Shang')
      } else if (a === 1) {
        this.$router.push('fenlie')
      } else if (a === 2) {
        this.$router.push('Gowu')
      } else if (a === 3) {
        this.$router.push('Geren')
      }
    }
  },
}
</script>
<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}

.box {
  .xian {
    width: 100%;
    height: 50px;
    background-color: #ff6040;
    display: flex;

    li {
      width: 25%;
      flex-wrap: wrap;
      
    }
  }

  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    // line-height: 150px;
    text-align: center;
    // background-color: #39a9ed;
    width: 450px;
    margin: 10px auto;

    img {
      width: 90%;
      height: 100%;
    }
  }

  .botnav {
    z-index: 999;
    display: flex;
    position: fixed;
    bottom: 0px;
    height: 50px;
    border-top: 1px solid #ccc;
    width: 100%;
    background-color: #fff;
    li {
      width: 25%;
      // line-height: 50px;
      align-content: flex-start;
      p{
        font-size: 10px;
      }
    }
  }

  .ipt {
    display: flex;
    position: relative;

    input {
      padding-left: 25px;
      border: 0;
      height: 90%;
    }

    .zi {
      position: absolute;
      left: 5px;
      top: 10px;
      font-size: 20px;
    }
  }

  .tos {
    .img1 {
      width: 40px;
      height: 40px;

      img {
        width: 80%;
        height: 80%;
      }
    }

    .img2 {
      width: 30%;

      img {
        width: 80%;
        height: 80%;
      }
    }

    .img3 {
      margin: 10px auto;
    }

    display: flex;
    background-color: #ff6040;
  }

  .van-nav-bar {
    background-color: #ff6040;
  }
}
</style>